<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type='text/babel'>

    function formatName(user) {
      return user.firstname + '' + user.lastname
    }

    // 在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
    function getGreeting(user) {
      if (user) {
        return <h1>hello, {formatName(user)}</h1>
      } else {
        return <h1>hello, strong</h1>
      }
    }

    const user = { firstname: 'mal', lastname: 'in' }

    const element = (
      <h2>
        hello, {formatName(user)} !
      </h2>
    )

    ReactDOM.render(
      element,
      document.getElementById('root')
    )

  </script>

</body>

</html>